<template>
	<div class="page">
		<div class="search-view c-panel">
			<CFilterSearchView
				:data="searchData"
				@on-search="getUsers">
			</CFilterSearchView>
		</div>
		<div class="data-view c-panel">
			<div class="btns-view">
    				<Button 
    					type="primary" 
    					@click="click2Refresh()"
    					style="margin-right: 10px;">
    					刷新数据
    				</Button>
			</div>
			
			<CUserListView
				:data="data">
			</CUserListView>
		</div>
		
		<div class="page-view">
			<Page :total="data.totalsize" :current="searchData.page + 1" 
				:page-size="searchData.pagesize" 
				show-sizer 
				show-elevator
				show-total 
				@on-change="changePage" 
				@on-page-size-change="changePage"></Page>
		</div>
	</div>
</template>

<script>
	import CFilterSearchView from '@/components/CFilterSearchView';
	import CUserListView from '@/pages/user/view/CUserListView';
	
	import UserService from '@/services/UserService.js';
	
	const $userService = UserService();

	export default {
		components: {
			CFilterSearchView, CUserListView
		},
		mounted: function() {
			this.getUsers();
		},
		data() {
			return {
				data: {
					loading: false,
					data: []	,
					totalsize: 0
				},
				searchData: { //搜索参数
					key: '',
					letter: null,
					atIds: [],
					filters: [],
					page: 0,
					pagesize: 20
				}
			}
		},
		methods: {
			toUserSpacePage: function(uid) {
				this.$router.push({name: 'userSpace', query: {uid: uid}});
			},
			click2Refresh() {
				this.getUsers();	
			},
			changePage: function(pagesize) {
				$data.searchParams.pagesize = pagesize;
				loadData();
			},
			getUsers() {
				var $this = this;
				$this.data.loading = true;
				$userService.getUsers($this.searchData)
					.then(function(response) {
						var res = response.data;
						var code = res.rescode;
						if(code == 100) {
							$this.data.data = res.data;
							$this.data.totalsize = res.totalSize;
						}
						$this.data.loading = false;
					}, function(error) {
						console.log(error);
						$this.data.loading = false;
					});
			}
		}
	};
</script>

<style scoped>
	.page {
	}
	.search-view {
		margin-bottom: 10px;
		display: flex;
		display: -webkit-flex;
		display: -moz-flex;
		justify-content: center;
		-webkit-justify-content: center;
		-moz-justify-content: center;
	}
	.btns-view {
		margin-bottom: 10px;
	}
	.data-view {
		margin-bottom: 60px;
	}
	
	.page-view {
		text-align: center;
		position: fixed;
		background-color: #fff;
		padding: 15px 0;
		z-index: 999;
		bottom: 0;
		height: 60px;
		left: 200px;
		right: 0px;
	}
</style>